<template>
  <div class="xiazhu_div">
    <div></div>
    <!-- 组件 -->
    <ul class="xuanze_xiazhu_ul">
      <!-- 大小单双全清 -->
      <li
        class="xuanze_xiazhu_li"
        v-for="(item,index) in list0"
        :key="index"
        :class="{red:isred===item}"
        @click="changeTop(item)"
      >{{item}}</li>
    </ul>

    <!-- 0-9生肖 -->
    <ul class="xiazhu_chakan_ul">
      <li
        class="xiazhu_chakan_li"
        v-for="(item,index) in list"
        :key="index"
        :class="{active:matchClass(index)}"
        @click="changeMatch(index)"
      >
        <img :src="item.src" alt />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "wanfa",
  data() {
    return {
      // 选大小单双清
      list0: ["全", "大", "小", "单", "双", "清"],
      //  动物图片
      list: [
        {
          id: "1",
          src: require("../../../assets/images/caipiao/shengxiao0.png")
        },
        {
          id: "2",
          src: require("../../../assets/images/caipiao/shengxiao1.png")
        },
        {
          id: "3",
          src: require("../../../assets/images/caipiao/shengxiao2.png")
        },
        {
          id: "4",
          src: require("../../../assets/images/caipiao/shengxiao3.png")
        },
        {
          id: "5",
          src: require("../../../assets/images/caipiao/shengxiao4.png")
        },
        {
          id: "6",
          src: require("../../../assets/images/caipiao/shengxiao5.png")
        },
        {
          id: "7",
          src: require("../../../assets/images/caipiao/shengxiao6.png")
        },
        {
          id: "8",
          src: require("../../../assets/images/caipiao/shengxiao7.png")
        },
        {
          id: "9",
          src: require("../../../assets/images/caipiao/shengxiao8.png")
        },
        {
          id: "10",
          src: require("../../../assets/images/caipiao/shengxiao9.png")
        }
      ],
      activeIndex: [], //此时要改变颜色的动物 下标 所有选中的数据 都在里面
      isred: null
    };
  },

  methods: {
    clear(){
      this.activeIndex = []
    },
    //   点击大
    changeTop(item) {
      switch (item) {
        case "全":
          let data0 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
          this.activeIndex = data0;
          this.$emit("getActiveData", data0);
          break;
        case "大":
          let data = [5, 6, 7, 8, 9];
          this.activeIndex = data;
          this.$emit("getActiveData", data);
          break;
        case "小":
          let data2 = [0, 1, 2, 3, 4];
          this.activeIndex = data2;
          this.$emit("getActiveData", data2);
          break;
        case "单":
          let data3 = [1, 3, 5, 7, 9];
          this.activeIndex = data3;
          this.$emit("getActiveData", data3);
          break;
        case "双":
          let data4 = [0, 2, 4, 6, 8];
          this.activeIndex = data4;
          this.$emit("getActiveData", data4);
          break;
        case "清":
          this.activeIndex = [];
          break;
      }
      //
      this.isred = item;
    },
    // 点击0-9图片匹配 includes选中的数据 有该项下标时 返回true 没有返回false
    matchClass(index) {
      return this.activeIndex.includes(index);
    },
    // 单独点击下面动物改变
    changeMatch(index) {
      // 声明一个这个数组中有没有这个下标
      let bol = this.activeIndex.includes(index);
      if (bol) {
        // 若是选中这个，则删除一个这个index
        this.activeIndex.splice(this.activeIndex.indexOf(index), 1);
      } else {
        // 若是没有，则添加这个下标
        this.activeIndex.push(index);
      }
      this.$emit("getActiveData", this.activeIndex);
    },

  }
};
</script>

<style scoped="scoped">
.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
  background: #d21d17;
  color: #fff;
  border: none;
}
.xiazhu_chakan_ul .xiazhu_chakan_li.active {
  background: #d21d17 !important;
}
</style>
